<template>
  <div class="line-chart">
    <Line :data="data" :options="options" />
  </div>
</template>

<script>
import { Line } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale } from 'chart.js';

ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale);

export default {
  name: 'LineChart',
  components: {
    Line
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  computed: {
    options() {
      return {
        responsive: true,
        plugins: {
          legend: {
            display: true,
            position: 'top'
          },
          title: {
            display: true,
            text: '折线图'
          }
        },
        scales: {
          x: {
            title: {
              display: true,
              text: '时间'
            }
          },
          y: {
            title: {
              display: true,
              text: '值'
            }
          }
        }
      };
    }
  }
};
</script>

<style scoped>
.line-chart {
  width: 100%;
  height: 100%;
}
</style>
